<template>
  <div class="lottery-footer border-top" @click.stop>
    <div class="footer-wrapper">
      <div class="left">
        <slot name="left">left</slot>
      </div>
      <div class="right" @click.stop="buyLotteryNow">
        <slot name="right">
          确认投注
        </slot>
      </div>
    </div>
  </div>
</template>
<script>

import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
  },
  data() {
    return {
      showKeyboard: false
    }
  },
  methods: {
    // 点击立即购买
    buyLotteryNow() {
      this.$emit('buy-now', true)
    },
    updateInputValue(v) {
      this.setUnitPrice(v)
    },
    // 清空选中状态
    clearSelectionState() {
      this.clonedLotteryState.forEach(item => {
        item.numbers.forEach(number => {
          number.selected = false
        })
      })
      this.setCurrentLotteryState(this.clonedLotteryState)
      this.setBuyingQuantity(0)
    },
    // 弹出键盘
    unfoldKeyboard() {
      this.showKeyboard = true
    },
    // 隐藏键盘
    hideKeyboard() {
      this.showKeyboard = false
    },
    // 订单确认 
    showOrderConfirmation() {
      this.$emit('order-confirm')
    },
    ...mapMutations('lottery', {
      setCurrentLotteryState: 'SET_CURRENT_LOTTERY_STATE',
      setBuyingQuantity: 'SET_BUYING_QUANTITY',
      setUnitPrice: 'SET_UNIT_PRICE'
    })
  },
  computed:{
    ...mapGetters('lottery', ['getShowMoneyInput', 'getCurrentLotteryState', 'getUnitPrice']),
    clonedLotteryState() {
      return JSON.parse(JSON.stringify(this.getCurrentLotteryState))
    }
  },
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .lottery-footer
    position fixed 
    left 0
    right 0
    bottom 0 
    width 100% 
    z-index 10001
    box-sizing border-box
    .footer-wrapper 
      height 48px
      display flex
      align-items center
      box-sizing border-box 
      justify-content space-between
      background #fff
      .left 
        display flex
        height 100%
        flex 1
        align-items center
        box-shadow 0 -2px 2px #ccc
        .money-input 
          outline-style none 
          width 110px 
          height 35px
          text-align center
          box-sizing border-box 
          color $color-aux-grey
        .item
          width 24px
          height 24px
          border-radius 50%
          text-align center
          background $color-theme-dark
          &.clear
            background $color-theme-red
          &.cart 
            position relative 
            &:before 
              position absolute 
              top -3px 
              right -7px
              content ''
              display block 
              width 7px
              height 7px 
              border-radius 50% 
              background-color $color-theme-red
          .icon 
            display inline-block
            line-height 24px
            .iconfont 
              font-size 24px
              color #fff
      .right 
        width 110px
        line-height 48px
        text-align center
        color #fff
        background $color-theme-red
        box-sizing border-box
        
</style>